<template>
	<view class="table-ul">
		<view v-for="(val,inx) in arrayData" :key="inx" class="table-li" :class="{'tab-selected':val.value==value}"
			@click="toggleMessage(val.value)">
			{{val.name}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				required: true
			},
			arrayData: {
				type: Array,
				required: true
			}
		},
		data() {
			return {

			}
		},
		methods: {
			toggleMessage(val) {
				 const newValue=val
				this.$emit('input', newValue);
				this.$emit('change', newValue);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table-ul {
		width: 100%;
		height: 2.2rem;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		position: relative;
		background-color: #fafafa;
	}

	.table-li {
		flex:1;
		background-color: #ddd;
		// margin-left: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 1.8rem;
		font-size: 1rem;
		font-weight: bold;
		color:rgba(138, 137, 136, 1);
	}

	.tab-selected {
		box-sizing: border-box;
		color:rgba(227, 116, 91, 1);
		background-color: #fafafa;
		// border-bottom: 4px solid rgba(227, 116, 91, 1);
	}
	
</style>